<%--
  Created by IntelliJ IDEA.
  User: user1
  Date: 2018/12/4
  Time: 10:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
    <%@include file="/common/common.jsp" %>
    <title>测试接口页面</title>
    <style>
        .sign_span{
            width: 20px;
            height: 20px;
            font-size: 20px;
            cursor: pointer;
        }
        .red{
            color: red;
        }
        .green{
            color: green;
        }
        .key, .value{
            width: 50px;
        }
        .main_body{
            width: 500px;
            height: 350px;
            margin: 200px auto;
        }
    </style>
</head>
<body>
<div class="main-container">
    <form id="main_form" method="post" >
        <div class="main_body">
        <input id="request_json" type="text" name="request_json" style="display: none;">
        request_json: <input id="request_url" type="text"><br>
        <div class="row r">
            key: <input type="text" class="key">value: <input type="text" class="value">
            <span class="sign_span green">+</span><span class="sign_span red">-</span>
        </div>
        <div class="row">
            <input id="submit" class="btn btn-primary" type="button" value="submit">
        </div>
        </div>
    </form>
</div>
<script>
    console.log("asdfgh");
    $(function () {
        bindFunc();
    });

    function bindFunc() {
        $("#main_form .row").find(".green").on("click", function () {
            var clone = $(this).parent().clone();
            $(".main_body .r:last").after(clone);
            bindFunc();
        });
        $("#main_form .row").find(".red").on("click", function () {
            $(this).parent().remove();
        });
    }

    $("#submit").on("click", function () {
        var request_url = $("#request_url").val();
        if($.trim(request_url) == ""){
            alert("request_url is null");
            return;
        }
        var jsonTxt = "{";
        $("#main_form").find(".r").each(function () {
           var key = $(this).find(".key:input").val();
           var value = $(this).find(".value:input").val();
           jsonTxt += "\"" + key + "\":" +"\"" + value;
        });
        jsonTxt += "}";
//        $("#main_form").prop("action", request_url);
//        $("#main_form").submit();
        $.ajax({
            url: request_url, //请求的url地址
            type: "POST", //请求方式
            dataType: "json", //返回格式为json
            async: true, //请求是否异步，默认为异步，这也是ajax重要特性
            data: {
                "request_json": jsonTxt
            },
            success: function(data) {
                console.log(data);
            },
            error: function() {
                alert(request_url+", 请求此路径时系统异常");
            }

        })
    });

</script>
</body>
</html>
